<template lang="pug">
div.cycleTabWrapper
    div.bac
      div
      el-tabs(v-model="curTab" @tab-click="routeToggle" stretch)
        el-tab-pane(lazy :label="tab.meta.title" v-for="(tab, index) in tabs" :name="tab.path")
        //- tab.path==='/setting/hardware/iccard'?curTab:
    .tab-content-box(:class="{active: isActive}" id="tabContentBox")
      transition(name="fade-transform" mode="out-in")
        keep-alive
          router-view
</template>
<script>
import { mapGetters } from 'vuex'
import { findTreeNode } from '@/utils/arrayToTree'
import { getTongBangUrl } from '../../../views/childCare/cookbook/api'
export default {
  components: {
  },
  props: {
    menuName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      curTab: '',
      tabs: []
    }
  },
  computed: {
    ...mapGetters(['curArea', 'addRoutes']),
    isActive () {
      return ['/childCare/growthObserve/publish'].includes(this.$route.path)
    },
    isActivePading () {
      return this.$route.path.indexOf('/childCare/growthObserve') === 0
    }
  },
  created () {
    this.getTab()
  },
  methods: {
    async getTab () {
      const id = this.$route.meta.pid
      let node = await findTreeNode({ value: id, key: 'key', tree: this.addRoutes })
      // console.log(node)
      if (node.children && !node.children.some(x => x.meta.target === 'menuItem' && x.meta.menuType === 'C')) {
        node = await findTreeNode({ value: node.meta.pid, key: 'key', tree: this.addRoutes })
      }
      const tabs = node.children.filter(x => !x.hidden && x.meta.target === 'menuItem' && x.meta.menuType === 'C')
      this.tabs = tabs
      this.curTab = this.$route.path
      console.log(this.curTab, '656tab')
    },
    routeToggle (tab) {
      console.log(tab, '656tab')
      // console.log(tab)
      this.$router.push(this.curTab)

      if (this.curTab === '/childCare/cookbook/recipe') {
        if (this.curArea.recipes) {
          const newWindow = window.open()
          this.getList(newWindow)
        }
      }
    },
    getList (newWindow) {
      console.log('newWindow')
      getTongBangUrl().then(res => {
        console.log(res)
        newWindow.location.href = res
      }).finally(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bac ::v-deep .el-tabs__nav.is-stretch > * {
    flex: 0.1;
    text-align: center;
}
.el-tabs__item.is-active {
  color: #FFB800;
}

.bac ::v-deep .el-tabs__active-bar {
  height: 4px;
  background: #FFAB00;
  border-radius: 32px;
}
.bac{
  background-color: #FFF;
  padding-top: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.bac ::v-deep .el-tabs__header{
 margin: 0 !important;
}
</style>
